<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" value="张三123" /></p>
            <p>年龄<input id="age" type="text" value="21" /></p>
            <p>性别
                <select id="gender">
                    <option>男</option>
                    <option>女</option>
                    <option>你猜</option>
                </select>
            </p>
            <p>
                <input type="button" value="添加" id="addBtn" />
                <input type="button" value="排序" id="sortBtn" />
            </p>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
						<tr>
							<td>1</td>
							<td>2</td>
							<td>2</td>
							<td><a href="#">删除</a></td>
						</tr>
				
            </tbody>
        </table>
    </div>

    <script>
		// 一、通过ajax实现添加的功能
		  var usernameEle = document.querySelector("#username");
		  var ageEle = document.querySelector("#age");
		  var genderEle = document.querySelector("#gender");
		  var addBtn = document.querySelector("#addBtn");
		  var tbodyEle = document.querySelector("tbody");
		  
		  var sortBtn = document.querySelector("#sortBtn");
		
		sortBtn.onclick = function(){
				// console.log(111);
				// sort参数默认是0 ，不传sort参数的时候 sort的值是0
				//sort如果传参了 就以传的参数为准；
				getStudentsData(1);	
			
			
		}
		
		
		addBtn.onclick = function(){
			var username = usernameEle.value;
			var age = ageEle.value;
			var gender = genderEle.value;
			
			var xhr = new XMLHttpRequest();
			xhr.open("POST","./add.php",true);
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xhr.onload = function(){
				// console.log(xhr.responseText);
				var res = JSON.parse(xhr.responseText);
				console.log(res.info);
				if(res.status==1){
					getStudentsData();
				}
			}
			var data = `username=${username}&age=${age}&gender=${gender}`;
			xhr.send(data);
		}
		
		
		
		// 二、需要通过ajax请求数据库 获取最新的学生信息；
		// 获取学员的信息
		function getStudentsData(sort=0){
				var xhr = new XMLHttpRequest();
				xhr.open("GET","getData.php?sort="+sort,true);
				xhr.onload = function(){
					// console.log(xhr.responseText);
					var data = JSON.parse(xhr.responseText);
					console.log(data);
					renderDom(data);
				}
				xhr.send();
		}
		getStudentsData();
		
		
		function renderDom(data){
			tbodyEle.innerHTML = "";
			data.forEach(item=>{
				var trEle = document.createElement("tr");
				trEle.innerHTML = `<td>${item.username}</td>
									<td>${item.age}</td>
									<td>${item.gender}</td>
									<td><a href="#" dataId="${item.id}">删除</a></td>`;
				var delEle = trEle.querySelector("a");
				delEle.onclick = function(){
					// console.log("点击了删除");
					// 获取数据id的值
					var id = this.getAttribute("dataId");
					console.log(id);
					delData(id);
				}
				tbodyEle.appendChild(trEle);
			})
		}
		
		
		// 删除数据的ajax
		
		function delData(id){
			var xhr = new XMLHttpRequest();
			xhr.open("get","del.php?id="+id,true);
			xhr.onload = function(){
				// console.log(xhr.responseText);
				var res = JSON.parse(xhr.responseText);
				if(res.status==1){
					getStudentsData();
				}
			}
			xhr.send();
		}
		
		
		
		
		
		
		
		
		
	
	
	
	
	
	
	
	
      //   // 1.获取元素 
      //   var usernameEle = document.querySelector("#username");
      //   var ageEle = document.querySelector("#age");
      //   var genderEle = document.querySelector("#gender");
      //   var addBtn = document.querySelector("#addBtn");
      //   var tbodyEle = document.querySelector("tbody");
      //   // 立刻获取了input里的值 ，放在username变量里存起来了 ，后面就不会改变了；
      //   // var username = usernameEle.value;
      
      //   // console.log(username);
      //   // 点击添加的时候获取 学生的信息；
      //   addBtn.onclick = function(){
      //       var username = usernameEle.value;
      //       var age = ageEle.value;
      //       var gender = genderEle.value;
      //       // console.log(username,age,gender);
      //       // 模板字符串 可以支持换行；
      //       // var str = "<div>"+
      //       //                 "<span>1</span>"+
      //       //                 "<span>2</span>"+
      //       //           "</div>";
      //       tbodyEle.innerHTML += `<tr>
      //                                   <td>${username}</td>
      //                                   <td>${age}</td>
      //                                   <td>${gender}</td>
      //                                   <td><button>删除</button></td>
      //                             </tr>`;
            
      //   //    获取删除按钮，一定是在删除按钮生成之后；
      //       addDeleEvent();
      //   }

      //   function addDeleEvent(){
      //       var btns = document.querySelectorAll("td button");
      //       btns.forEach(function(btn){
      //           btn.onclick = function(){
      //               // console.log("点击了删除按钮")
      //               this.parentNode.parentNode.remove();
      //           }
      //       })
      //   }
    </script>
</body>

</html>